<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:Products</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
               <b>产品名称：{{item.title}}</b> 
               -----------
               <b>价格：{{item.price}}</b> 
               -----------
               <b>库存：{{item.inventory}}</b> 
               <button :disabled="item.inventory===0" @click="addCart(item)">+加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template> 
<script>
    //需求
    //1.请求服务 器，在products组件里面渲染数据
       //- 封装请求的方法
       //- 请求放到vuex的actions里面
       //- vuex需要模块化，并且添加到mutations
    //2.点击产品后面的按钮，需要将产品添加到购物车
    //3.相同的数据添加到购物车之后，需要让购物车的数量+1 产品的库存-1

    import { mapActions ,mapState} from 'vuex';
    //引入axios
    import axios from 'axios'
    export default{
        methods:{
            addCart(curren){//curren点击按钮选中的这条数据
                console.log(curren)
                this.ADD_CART(curren)
            },
            ...mapActions('product',['FETCH_PRODUCT']),
            ...mapActions('cart',['ADD_CART'])
        },
        computed:{
            ...mapState('product',['productData'])
        },
        mounted(){
            this.FETCH_PRODUCT()
        },
        created(){
            //发送一个get请求  
            axios.get("/api/data/index.json",{
                //get请求的配置
                //请求头
                headers:{},
                //传递的参数
                params:{
                    name:'lilei'
                }
            })
               .then(res=>{
                console.log(res)
               })  


               //发送一个post请求
               //语法：axios.post('地址'，{传递的参数}，{请求的配置})
            //    axios.post('/api/users/login',{
            //     //传递的数据
            //     username:'lbw',
            //     password:'555'
            //    },{
            //     //配置
            //     headers:{
            //         nickname:'jntm'
            //     }
            //    })
            //         .then(res=>{
            //             console.log(res)
            //         })
                
                //配置模式config

                axios({
                    url:'api/users/login', //请求地址
                    method:"post",//请求方式
                    // params:{},//get请求的传参字段
                    data:{
                        username:'admin',
                        password:'admin'
                    },//post请求的传参字段
                    //headers:{},//设置请求头
                    timeout:3000,//超时设置，请求3秒没有响应，直接进入catch
                    withCredentials:true//携带凭据（cookie）
                })
                .then(res=>{
                    console.log(res)
                })
              
        }
    }
</script>